<template>
  <div class="root-house-mng">
    <div class="root-house-mng-main">
      <Popover title="筛选" trigger="click" placement="rightTop">
        <template #content>
          <BasicForm
            class="x-village-tabs"
            submitOnReset
            @register="registerForm"
            @submit="handleSearchInfoChange"
            v-bind="getFormProps"
          >
            <template #[replaceFormSlotKey(item)]="data" v-for="item in getFormSlotKeys">
              <slot :name="item" v-bind="data || {}"></slot>
            </template>
          </BasicForm>
        </template>
        <Button class="x-houseMng-search" type="primary" shape="circle">
          <SearchOutlined />
        </Button>
      </Popover>
      <div class="statMapLayers">

        <!-- <Row
        ><Checkbox defaultChecked @change="checkDcLayer"
          ><div style="display: flex; align-items: center"
            >督查隐患
            <div
              style="background-color: red; width: 13px; height: 12px; margin: 3px 0 0 5px"
            ></div></div></Checkbox
      ></Row> -->
        <Row
          ><Checkbox defaultChecked @change="checkHcLayer"
            ><div style="display: flex; align-items: center"
              >核查隐患
              <div
                style="background-color: #ffff00; width: 13px; height: 12px; margin: 3px 0 0 5px"
              ></div
            ></div> </Checkbox
        >
      
        <a-space style="margin-left: 10px">
          <span>开始时间：</span>
          <a-date-picker v-model:value="startDate" :format="dateFormat" />
        </a-space>
        <a-space style="margin-left: 10px">
          <span>结束时间：</span>
          <a-date-picker v-model:value="endDate" :format="dateFormat" />
        </a-space>
      </Row>
           <Row>
          <Checkbox defaultChecked @change="checkZcLayer"
            ><div style="display: flex; align-items: center"
              >自查隐患
              <div
                style="background-color: #b60b00; width: 13px; height: 12px; margin: 3px 0 0 5px"
              ></div></div
          ></Checkbox>
          <a-space style="margin-left: 10px">
            <span>开始时间：</span>
            <a-date-picker v-model:value="startDate" :format="dateFormat" />
          </a-space>
          <a-space style="margin-left: 10px">
            <span>结束时间：</span>
            <a-date-picker v-model:value="endDate" :format="dateFormat" />
          </a-space>
        </Row>
      </div>
      <div :id="mapViewId" style="height: calc(100vh - 70px)"></div>
    </div>
  </div>
</template>

<script lang="ts">
  // import maplibregl from 'mapbox-gl';
  // import 'mapbox-gl/dist/mapbox-gl.css';
  import { createImgPreview, ImagePreview } from '/@/components/Preview/index';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { getBasicColumns, tablePopupSchema } from './tableData';
  import { PageWrapper } from '/@/components/Page';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { Tabs, Space, Divider, PageHeader, Tag, Collapse, Button, Popover } from 'ant-design-vue';
  import { Col, Row, Checkbox, Affix } from 'ant-design-vue';
  import { useUserStore } from '/@/store/modules/user';
  import { defineComponent, onMounted, reactive, ref, ComputedRef, computed, Ref } from 'vue';
  import { houseListApi, houseApi, hiddenDangerStatApi } from '/@/api/demo/table';
  import * as tableDataPopup from '/@/views/map/tableDataPopup';
  import { useGlobSetting } from '/@/hooks/setting';
  const globSetting = useGlobSetting();
  import { getSearchFormSchema } from '/@/views/house/tableData';
  import { useMessage } from '/@/hooks/web/useMessage';
  const { createMessage } = useMessage();
  const { info, success, warning, error } = createMessage;
  import { FormProps, FormSchema } from '/@/components/Table';
  import AuditModal from './AuditModal.vue';
  import { useModal } from '/@/components/Modal';
  import type { UserInfo } from '/#/store';
  import { SearchOutlined } from '@ant-design/icons-vue';
  import { useDrawer } from '/@/components/Drawer';

  import bj_center from '/@/assets/bj_center.json';
  import jiedao_center from '/@/assets/jiedao_center.json';
  import qx_center from '/@/assets/qx_center.json';

  const imgList: string[] = [];
  export default defineComponent({
    name: 'HouMng',
    components: {
      ImagePreview,
      BasicTable,
      BasicForm,
      AuditModal,
      TableAction,
      PageWrapper,
      Tabs,
      Divider,
      PageHeader,
      Space,
      SearchOutlined,
      Popover,
      Collapse,
      Tag,
      TabPane: Tabs.TabPane,
      Button,
      Col,
      Row,
      Checkbox,
      Affix,
    },
    props: {
      msg: String,
      mapViewId: {
        type: String,
        default: 'map',
      },
      showMapOnly: {
        type: Boolean,
        default: false,
      },
      showMapPopupButtons: {
        type: Boolean,
        default: true,
      },
    },
    setup(props, { attrs, emit, slots, expose }) {
      const activeKeyRef = ref('map');
      const activePickKeyRef = ref('fire');
      const activeMapPickKeyRef = ref('map');
      const searchVisible = ref(false);
      const uriBase = `${globSetting.apiBaseUrl}${globSetting.apiUrl}`;

      const mapC = ref<maplibregl.Map>();
      const pickedHouse = ref({});
      const pickedHouseId = ref('');
      const houseFirePlaceRef = ref();
      const housePolicePlaceRef = ref();

      const enablepcztzc = ref(true);
      const enablepcztDc = ref(true);
      const enablepczthc = ref(true);

      const userStore = useUserStore();

      function calcModes(user: UserInfo) {
        if (user) {
          if ('Admin' == user.role) {
            return ['fire', 'police', 'housing'];
          } else {
            if ('FireControl' == user.userGroup) {
              return ['fire'];
            } else if ('Police' == user.userGroup) {
              return ['police'];
            } else if ('Housing' == user.userGroup) {
              return ['housing'];
            }
          }
        }

        return [];
      }

      const underMode = calcModes(userStore.getUserInfo);
      console.log('@underMode=========', underMode);
      const tk = userStore.getToken;
      // console.log('@tk=========', tk);
      let protocol = window.document.location.protocol;
      let host = window.document.location.host;
      let localhostPath = protocol + '//' + host;

      //图斑权限过滤
      const { jurisdictionCodes } = userStore.getUserInfo;

   
      const buzlinebaseFilter: Array<any> = [];
      if (jurisdictionCodes) {
        buzlinebaseFilter.push('any');
        for (let i = 0; i < jurisdictionCodes.length; i++) {
          const code = jurisdictionCodes[i].regionCode;
          const subcode = code.replace(/[0]*$/, '');
          console.log(subcode);
          buzlinebaseFilter.push(['in', subcode, ['get', 'village']]);
        }
      }
      let filterFinal = buzlinebaseFilter.length > 0 ? buzlinebaseFilter : ['any', true];
      const userGroup = userStore.getUserGroup;
      console.log('@getUserGroup=========', userStore.getUserGroup);
      //对于公安用户，数据只能显示107的
      if (userGroup == 'Police') {
        filterFinal = ['all', filterFinal, ['==', ['get', 'check107'], 1]];
      }

      const mapstyle = reactive<maplibregl.Style>({
        version: 8,
        sources: {
          OSM: {
            type: 'raster',
            tiles: [
              'http://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=82917dfddef988b400ff306a56c1c7de',
            ],
            tileSize: 256,
            minzoom: 0,
            maxzoom: 18,
          },
          tianditu: {
            type: 'raster',
            tiles: [
              'http://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk==82917dfddef988b400ff306a56c1c7de',
            ],
            tileSize: 256,
            minzoom: 0,
            maxzoom: 18,
          },
          buzBase: {
            type: 'vector',
            scheme: 'xyz',
            tiles: [
              `${uriBase}/houses/base/static/vector/tiles?x={x}&y={y}&z={z}&access_token=${tk}`,
            ],
            minzoom: 11,
            maxzoom: 18,
          },
          buz: {
            type: 'vector',
            scheme: 'xyz',
            tiles: [`${uriBase}/houses/dynamic/vector/tiles?x={x}&y={y}&z={z}&access_token=${tk}`],
            minzoom: 11,
            maxzoom: 18,
          },
          sampleAll: {
            type: 'vector',
            scheme: 'xyz',
            tiles: [
              `${uriBase}/risk-census-house/dynamic/vector/tiles?x={x}&y={y}&z={z}&access_token=${tk}`,
            ],
            minzoom: 11,
            maxzoom: 18,
          },
          highLight: {
            type: 'geojson',
            data: {
              type: 'FeatureCollection',
              features: [],
            },
          },
          bjMap: {
            type: 'geojson',
            data: `${localhostPath}/xzq/bj.geojson`,
          },
          qxMap: {
            type: 'geojson',
            data: `${localhostPath}/xzq/qx.geojson`,
          },
          jiedaoMap: {
            type: 'geojson',
            data: `${localhostPath}/xzq/jiedao.geojson`,
          },
        },
        layers: [
          {
            id: 'OSM',
            type: 'raster',
            source: 'OSM',
          },
          {
            id: 'bjMap',
            type: 'line',
            source: 'bjMap',
            paint: {
              'line-color': 'red',
              'line-width': 2,
              'line-dasharray': [1, 1],
            },
            maxzoom: 7,
          },
          {
            id: 'bjMap-anno',
            type: 'symbol',
            source: 'bjMap',
            maxzoom: 7,
            layout: {
              'text-field': '{Name}',
              'text-font': ['DIN Offc Pro Medium,Arial Unicode MS Regular'],
              'text-size': 18,
            },
            paint: {
              'text-color': 'rgb(255,255,255)',
              'text-halo-width': 1,
              'text-halo-color': 'rgb(0,0,0)',
            },
          },
          {
            id: 'qxMap',
            type: 'line',
            source: 'qxMap',
            paint: {
              'line-color': '#b2a471',
              'line-width': 2,
              'line-dasharray': [1, 1],
            },
            minzoom: 7,
            maxzoom: 10,
          },
          {
            id: 'qxMap-anno',
            type: 'symbol',
            source: 'qxMap',
            minzoom: 7,
            maxzoom: 10,
            layout: {
              'text-field': '{Name}',
              'text-font': ['DIN Offc Pro Medium,Arial Unicode MS Regular'],
              'text-size': 18,
            },
            paint: {
              'text-color': 'rgb(255,255,255)',
              'text-halo-width': 1,
              'text-halo-color': 'rgb(0,0,0)',
            },
          },
          {
            id: 'jiedaoMap',
            type: 'line',
            source: 'jiedaoMap',
            paint: {
              'line-color': '#b2a471',
              'line-width': 2,
              'line-dasharray': [1, 1],
            },
            minzoom: 10,
          },
          {
            id: 'jiedaoMap-anno',
            type: 'symbol',
            source: 'jiedaoMap',
            minzoom: 10,
            layout: {
              'text-field': '{NAME}',
              'text-font': ['DIN Offc Pro Medium,Arial Unicode MS Regular'],
              'text-size': 18,
            },
            paint: {
              'text-color': 'rgb(255,255,255)',
              'text-halo-width': 1,
              'text-halo-color': 'rgb(0,0,0)',
            },
          },
          {
            id: 'pczthc',
            'source-layer': 'ffpolygon',
            type: 'fill',
            source: 'buz',
            minzoom: 8,
            maxzoom: 22,
            paint: {
              'fill-color': '#ffff00',
            },
             filter: ['==', 'pczthc', 0],
          },
          
          {
            id: 'pcztzc',
            'source-layer': 'ffpolygon',
            type: 'fill',
            source: 'buz',
            minzoom: 8,
            maxzoom: 22,
            paint: {
              'fill-color': '#b60b00',
            },
            filter: ['==', 'pcztzc', 0],
           // filter: ['in', 'aqyhcp', '1', '3'],
          },
          // {
          //   id: 'pcztpolice',
          //   'source-layer': 'ffpolygon',
          //   type: 'fill',
          //   source: 'buz',
          //   minzoom: 8,
          //   maxzoom: 22,
          //   paint: {
          //     'fill-color': 'rgb(255,0,0)',
          //   },
          //   filter: ['==', 'pcztpolice', 2],
          // },
          {
            id: 'allHouses',
            'source-layer': 'ffpolygon',
            type: 'fill',
            source: 'buz',
            minzoom: 8,
            maxzoom: 22,
            paint: {
              'fill-color': 'transparent',
            
            },
          },
            {  
            // Line layer for the outline  
            id: 'allHousesOutline',  
            'source-layer': 'ffpolygon',  
            type: 'line',  
            source: 'buz',  
            minzoom: 8,  
            maxzoom: 22,  
            paint: {  
              'line-color': '#3b85ff', // Blue outline  
              'line-width': 3, // Width of the outline  
            },  
          },  



          {
            id: 'highLight',
            type: 'fill',
            source: 'highLight',
            paint: {
              'fill-opacity': 0.6,
              'fill-color': 'blue',
            },
          },
        ],
        sprite: `${localhostPath}/maplib/sprites/sprite`,
        glyphs: `${localhostPath}/maplib/font/{fontstack}/{range}.pbf`,
      });
      const mapopC: maplibregl.Popup[] = [];
      function clickPopUpOk(_) {
        if (mapopC.length > 0) {
          mapopC[0].remove();
        }
      }

      const [register5, { openDrawer: openDrawer5, setDrawerProps }] = useDrawer();

      function clickPopupButtonOk(obj) {
        pickedHouse.value = obj;
        pickedHouseId.value = obj.id;

        emit('onPopupButtonOkClick', obj);
      }

      function clickPopupButtonPolice(obj) {
        pickedHouse.value = obj;
        pickedHouseId.value = obj.id;

        emit('onPopupButtonPoliceClick', obj);
      }

      function clickPopupButtonFire(obj) {
        pickedHouse.value = obj;
        pickedHouseId.value = obj.id;

        emit('onPopupButtonFireClick', obj);
      }

      function clickPopupButtonZhujian(obj) {
        pickedHouse.value = obj;
        pickedHouseId.value = obj.id;

        emit('onPopupButtonZhujianClick', obj);
      }

      function createPopUp(features) {
        return tableDataPopup.createPopUpEx(
          features,
          tablePopupSchema(),
          clickPopUpOk,
          houseApi,
          clickPopupButtonOk,
          clickPopupButtonFire,
          clickPopupButtonPolice,
          clickPopupButtonZhujian,
          {
            visibleButtons: props.showMapPopupButtons,
            visibleStatus: true,
          },
        );
      }

      function popupInfo(e) {
        if (e.features && e.features.length > 0) {
          const geojsonData: any = {
            type: 'FeatureCollection',
            features: e.features,
          };
          const map = mapC.value;
          var mySource: maplibregl.GeoJSONSource = map.getSource(
            'highLight',
          ) as maplibregl.GeoJSONSource;
          mySource.setData(geojsonData);

          //创建内容
          createPopUp(e).then((popupTemp) => {
            let currentPopup = new maplibregl.Popup();
            currentPopup.addClassName('click-map-popup');
            currentPopup.setLngLat(e.lngLat).setDOMContent(popupTemp).addTo(map);

            mapopC.length = 0;
            mapopC.push(currentPopup);
          });
        }
      }

      function addStatLayer(
        type: number,
        propName: string,
        map: maplibregl.Map,
        sourceId: string,
        geojsonData: any,
        minz: number,
        maxz: number,
        findV: Function,
      ) {
        hiddenDangerStatApi(type).then((resp) => {
          geojsonData.features.forEach((element) => {
            const eleValue = element.properties[propName];

            const findVal = resp.find((item) => findV(item, eleValue));

            if (findVal) {
              element.properties['cchc'] = `${findVal.jcyhcount}`;
              element.properties['ccdc'] = `${findVal.jcyhcount}`;
              element.properties['cczc'] = `${findVal.zcyhcount}`;
            } else {
              element.properties['cchc'] = '-';
              element.properties['ccdc'] = '-';
              element.properties['cczc'] = '-';
            }
          });
          map.addSource(sourceId, {
            type: 'geojson',
            data: geojsonData,
          });

          map.addLayer({
            id: `${sourceId}-anno`,
            type: 'symbol',
            source: sourceId,
            minzoom: minz,
            maxzoom: maxz,
            layout: {
              'text-field': [
                'format',
                // ['get', 'ccdc'],
                // {
                //   'text-color': 'rgb(255,0,0)',
                //   'text-halo-color': 'rgb(255,0,0)',
                //   'text-halo-width': 20,
                // },
                // '\t|\t',
                // { 'font-scale': 1.1 },
                ['get', 'cchc'],
                {
                  'text-color': '#ffff00',
                },
                '\t|\t',
                { 'font-scale': 1.1 },
                ['get', 'cczc'],
                {
                  'text-color': '#b60b00',
                },
              ],
              'text-font': ['DIN Offc Pro Medium,Arial Unicode MS Regular'],
              'text-size': 18,
              'icon-size': 1.2,
              'icon-text-fit': 'both',
              'icon-image': 'statImg',
              'icon-offset': [0, 2],
              // 'icon-text-fit-padding': [8, 6, 8, 6],
              'icon-text-fit-padding': [3, 6, 3, 6],
            },
            paint: {
              'text-color': 'white',
              'icon-halo-width': 1,
              'icon-halo-color': 'rgb(255,0,0)',
            },
          });
        });
      }
      function checkXXXLayer(lyr, cv) {
        const map = mapC.value;
        if (cv) {
          map.setLayoutProperty(lyr, 'visibility', 'visible');
        } else {
          map.setLayoutProperty(lyr, 'visibility', 'none');
        }
      }

      function updateStatSource(
        type: number,
        propName: string,
        sourceId: string,
        geojsonData: any,
        findV: Function,
      ) {
        if (enablepczthc.value || enablepcztDc.value || enablepcztzc.value) {
          checkXXXLayer(`${sourceId}-anno`, true);
        } else {
          checkXXXLayer(`${sourceId}-anno`, false);
        }
        const layoutTextProperty: any[] = [];
        layoutTextProperty.push('format');
        if (enablepczthc.value) {
          layoutTextProperty.push(['get', 'cchc']);
          layoutTextProperty.push({
            'text-color': '#ffff00',
          });
        }
        // if (enablepcztDc.value) {
        //   layoutTextProperty.push(['get', 'ccdc']);
        //   layoutTextProperty.push({
        //     'text-color': 'rgb(255,0,0)',
        //   });
        // }
        // if (enablepczthc.value) {
        //   if (layoutTextProperty.length > 1) {
        //     layoutTextProperty.push('\t|\t');
        //     layoutTextProperty.push({ 'font-scale': 1.1 });
        //   }

        //   layoutTextProperty.push(['get', 'cchc']);
        //   layoutTextProperty.push({
        //     'text-color': '#ffff00',
        //   });
        // }

        if (enablepcztzc.value) {
          if (layoutTextProperty.length > 1) {
            layoutTextProperty.push('\t|\t');
            layoutTextProperty.push({ 'font-scale': 1.1 });
          }
          layoutTextProperty.push(['get', 'cczc']);
          layoutTextProperty.push({
            'text-color': '#b60b00',
          });
        }

        mapC.value.setLayoutProperty(`${sourceId}-anno`, 'text-field', layoutTextProperty);
      }

      onMounted(() => {
        const map = new maplibregl.Map({
          container: props.mapViewId,
          style: mapstyle,
          center: [116.5, 40.05],
          zoom: 9,
          maxZoom: 20,
        });
        mapC.value = map;
        map.on('click', 'allHouses', function (e) {
          // 查询WMS要素属性
          popupInfo(e);
          e.preventDefault();
        });
        // map.on('click', 'pcztzc', function (e) {
        //   if (e.defaultPrevented) {
        //     return;
        //   }
        //   // 查询WMS要素属性
        //   popupInfo(e);
        //   e.preventDefault();
        // });
        // 图标的底图
        map.loadImage('./resource/img/bgstat1.png', (error, image) => {
          if (error) throw error;
          map.addImage('statImg', image);

          addStatLayer(0, 'RegionId', map, 'bjCenterMap', bj_center, 1, 7, () => true);
          addStatLayer(
            1,
            'RegionId',
            map,
            'qxCenterMap',
            qx_center,
            7,
            10,
            (item, eleValue) => item.code === eleValue,
          );
          addStatLayer(
            2,
            'PAC',
            map,
            'jiedao_center',
            jiedao_center,
            10,
            22,
            (item, eleValue) => item.code.substring(0, 9) === eleValue,
          );
        });
        function webMercator2LngLat(x: any, y: any) {
          var lng = (x / 20037508.34) * 180;
          var lat = (y / 20037508.34) * 180;
          lat = (180 / Math.PI) * (2 * Math.atan(Math.exp((lat * Math.PI) / 180)) - Math.PI / 2);
          return [lng, lat];
        }

        function latLng2WebMercator2(lng, lat) {
          var x = (lng * 20037508.34) / 180;
          var y = Math.log(Math.tan(((90 + lat) * Math.PI) / 360)) / (Math.PI / 180);
          y = (y * 20037508.34) / 180;
          return [x, y];
        }

        // 经纬度转墨卡托
        function wgs84ToMercator(lng: any, lat: any) {
          lng = parseFloat(lng);
          lat = parseFloat(lat);
          var d = Math.PI / 180;
          const max = 90;
          lat = Math.max(Math.min(max, lat), -max);
          const sin = Math.sin(lat * d);
          var x = 6378137 * lng * d;
          var y = (6378137 * Math.log((1 + sin) / (1 - sin))) / 2;
          return {
            x,
            y,
          };
        }
      });

      const [registerModal, callbackUseModal] = useModal();

      function cloneSearchSchema(serSchema: FormSchema[]) {
        var serSchemaClone: FormSchema[] = [];
        serSchema.forEach((ele) => {
          const a: FormSchema = Object.assign({}, ele);
          a.colProps = { span: 12, flex: 1 };
          serSchemaClone.push(a);
        });

        return serSchemaClone;
      }

      var serSchema = getSearchFormSchema(underMode);

      const [registerTable, { reload }] = useTable({
        api: houseListApi,
        columns: getBasicColumns(),
        pagination: { pageSize: 10 },
        formConfig: {
          schemas: cloneSearchSchema(serSchema),
        },
        useSearchForm: true,
        bordered: true,
        actionColumn: {
          width: 120,
          title: '操作',
          dataIndex: 'action',
          slots: { customRender: 'action' },
        },
      });
      function handleReloadCurrent() {
        reload();
      }

      function handleReload() {
        reload({
          page: 1,
        });
      }

      function handleSuccess() {
        reload();
      }

      function onBack2Map() {
        pickedHouseId.value = '';
        pickedHouse.value = '';
      }

      function handlePreview(record: Recordable) {
        const onImgLoad = ({ index, url, dom }) => {
          console.log(`第${index + 1}张图片已加载，URL为：${url}`, dom);
        };
        imgList.length = 0;
        if (record.photos) {
          let photos = record.photos.split(',');
          photos.forEach((ele) => {
            if (ele) imgList.push(`${globSetting.apiBaseUrl}/api/v1/images/${ele}`);
          });
        }
        // 可以使用createImgPreview返回的 PreviewActions 来控制预览逻辑，实现类似幻灯片、自动旋转之类的骚操作
        createImgPreview({ imageList: imgList, defaultWidth: 700, rememberState: true, onImgLoad });
      }

      function handleStatus(record: Recordable) {
        callbackUseModal.openModal(true, {
          record,
          isUpdate: true,
        });
      }
      function handleLocMap(record: Recordable) {
        activeKeyRef.value = 'map';
        let lng = record.lng;
        let lat = record.lat;
        let coordinates: maplibregl.LngLatLike = [lng, lat];
        const mapL = mapC.value;
        mapL.flyTo({
          center: coordinates, // 中心点
          zoom: 14, // 缩放比例
        });
        clickPopUpOk({});
        houseApi(record).then((resp: any) => {
          const e: any = {
            lngLat: coordinates,
            features: [
              {
                properties: record,
                geometry: JSON.parse(resp.geometry),
              },
            ],
          };

          popupInfo(e);
        });
      }
      function locMap(houseId) {
        mapC.value.resize();
        houseApi({ id: houseId })
          .then((record) => {
            let lng = (record.boundingBox.xMin + record.boundingBox.xMax) / 2;
            let lat = (record.boundingBox.yMin + record.boundingBox.yMax) / 2;
            let coordinates: maplibregl.LngLatLike = [lng, lat];
            const mapL = mapC.value;
            mapL.flyTo({
              center: coordinates, // 中心点
              zoom: 14, // 缩放比例
            });
            clickPopUpOk({});
            const e: any = {
              lngLat: coordinates,
              features: [
                {
                  properties: record,
                  geometry: JSON.parse(record.geometry),
                },
              ],
            };

            popupInfo(e);
          })
          .catch((err) => {
            error(err.message || '获取房屋信息失败');
          });
      }

      const getFormProps = computed((): Partial<FormProps> => {
        return {
          showAdvancedButton: false,
          compact: true,
          actionColOptions: { span: 6 },
          schemas: cloneSearchSchema(serSchema),
        };
      });

      function handleSearchInfoChange(info: Recordable) {}
      const [registerForm, formActions] = useForm();
      const getFormSlotKeys: ComputedRef<string[]> = computed(() => {
        const keys = Object.keys(slots);
        return keys
          .map((item) => (item.startsWith('form-') ? item : null))
          .filter((item) => !!item) as string[];
      });
      function replaceFormSlotKey(key: string) {
        if (!key) return '';
        return key?.replace?.(/form\-/, '') ?? '';
      }
      const showDrawer = () => {
        searchVisible.value = true;
      };

      function updateStatLayerSource() {

        
        
        checkXXXLayer(`pczthc`, enablepczthc.value);
        // checkXXXLayer(`pcztpolice`, enablepcztDc.value);
        checkXXXLayer(`pcztzc`, enablepcztzc.value);
        updateStatSource(0, 'RegionId', 'bjCenterMap', bj_center, () => true);
        updateStatSource(
          1,
          'RegionId',
          'qxCenterMap',
          qx_center,
          (item, eleValue) => item.code === eleValue,
        );
        updateStatSource(
          2,
          'PAC',
          'jiedao_center',
          jiedao_center,
          (item, eleValue) => item.code.substring(0, 9) === eleValue,
        );
      }

      function checkZcLayer(cv) {
        enablepcztzc.value = !enablepcztzc.value;
        updateStatLayerSource();
      }
      function checkHcLayer(cv) {
        enablepczthc.value = !enablepczthc.value;
        updateStatLayerSource();
      }
      function checkDcLayer(cv) {
        enablepcztDc.value = !enablepcztDc.value;
        updateStatLayerSource();
      }
      return {
        checkZcLayer,
        checkHcLayer,
        checkDcLayer,
        imgList,
        activeKeyRef,
        activePickKeyRef,
        activeMapPickKeyRef,
        registerForm,
        getFormSlotKeys,
        replaceFormSlotKey,
        getFormProps,
        handleSearchInfoChange,
        registerTable,
        handlePreview,
        handleLocMap,
        handleStatus,
        handleReloadCurrent,
        handleReload,
        locMap,
        registerModal,
        handleSuccess,
        searchVisible,
        showDrawer,
        register5,
        pickedHouse,
        pickedHouseId,
        houseFirePlaceRef,
        housePolicePlaceRef,
        onBack2Map,
      };
    },
  });
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  .x-houseMng-search {
    z-index: 100;
    margin: 6px;
    position: absolute;
  }
  .statMapLayers {
    position: absolute;
    z-index: 1000;
    background: #e6e6e6;
    opacity: 1;
  }
  .root-house-mng-main {
    margin: 6px;
  }

  .x-village-tabs {
    //z-index: 100;
    //position: absolute;
    width: 60vw;
    margin-top: 6px;
    margin-left: 40px;
    //background-color: rgba(34, 34, 34, 0.6);
    :deep(.ant-form) {
      margin-top: 6px;
    }

    // :deep(.ant-form-item-label) > label {
    //   color: white;
    // }
  }
</style>
